<template>
    <transition>
        <div class="header-top">
            <div class="top-left">
                <!-- <span :class="['todo-btn', todo.redo ? '' : 'todo-btn-disable']"
                    @click="handletodo(true)"
                >
                    <i class="iconfont icon-chexiao"></i>撤销
                </span>
                <span :class="['todo-btn',  todo.undo ? '' : 'todo-btn-disable']"
                    @click="handletodo(false)"
                >
                    <i class="iconfont icon-chexiao"
                        style="display: inline-block; transform: scaleX(-1);"
                    ></i>恢复
                </span> -->
            </div>
            <div class="top-right">
                <span class="save-btn" @click="save">保存</span>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    props: {
        todo: {
            type: Object,
            default: {
                redo: false, undo: false
            }
        }
    },
  methods: {
    save: function() {
      this.$emit("save");
    },

    handletodo(type) {
        if (type) {
            this.todo.redo && this.$emit('handletodo', type)
        } else {
            this.todo.undo && this.$emit('handletodo', type)
        }
    },

  }
};
</script>
<style lang="scss" scoped>
.header-top {
  height: vw(90);
  line-height: vw(90);
  display: flex;
  justify-content: space-between;
  padding: 0 vw(30);
  background: $primary;
  animation: aly-down 1s;
}
.top-left,
.top-right {
  font-size: vw(26);
}
.top-left {
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 30%;
}
.top-right {
  .save-btn {
    display: inline-block;
    width: vw(125);
    height: vw(59);
    line-height: vw(59);
    background: rgba(255, 255, 255, 1);
    border-radius: vw(30);
    color: $primary;
    text-align: center;
  }
  .save-btn:active {
    opacity: 0.8;
  }
}
.todo-btn {
    line-height: 12vmin;
}
.todo-btn-disable{ 
    color: rgba(255, 255, 255, .5);
}
</style>


